<template>
	<view class="my-set">
		<view class="line"></view>
		<image class="face" :src="userInfo.face"></image>
		<view class="list" @click="modifyNickName">
			<view class="left">用户</view>
			<view class="right">
				<text>{{userInfo.nickname}}</text>
				<image class="icon-arrow" src="../../static/images/icon-right-arrow.png"></image>
			</view>
		</view>
		<view class="list" @click="modifyDyNum">
			<view class="left">抖音号</view>
			<view class="right">
				<text>{{userInfo.num}}</text>
				<image class="icon-arrow" src="../../static/images/icon-right-arrow.png"></image>
			</view>
		</view>
		<view class="list" @click="modifySex">
			<view class="left">性别</view>
			<view class="right">
				<text>{{userInfo.sex==0?"女":"男"}}</text>
				<image class="icon-arrow" src="../../static/images/icon-right-arrow.png"></image>
			</view>
		</view>
		<view class="list" @click="modifyBirthday">
			<view class="left">生日</view>
			<view class="right">
				<text>{{getBirthday(userInfo.birthday)}}</text>
				<image class="icon-arrow" src="../../static/images/icon-right-arrow.png"></image>
			</view>
		</view>
		<view class="list" @click="modifyLocation">
			<view class="left">所在地</view>
			<view class="right">
				<text>{{userInfo.province+"-"+userInfo.city}}</text>
				<image class="icon-arrow" src="../../static/images/icon-right-arrow.png"></image>
			</view>
		</view>
		<view class="list" @click="modifyDesc">
			<view class="left">简介</view>
			<view class="right">
				<text>{{userInfo.description}}</text>
				<image class="icon-arrow" src="../../static/images/icon-right-arrow.png"></image>
			</view>
		</view>
		<view class="btn" @click="loginOut">
			退出登录
		</view>
	</view>
</template>

<script setup>
	let serverUrl=getApp().globalData.severUrl
	import {onShow} from "@dcloudio/uni-app"
import { ref } from "vue";
	const userInfo=ref({})
	onShow(()=>{
		//获取用户缓存数据
		// userInfo.value=uni.getStorageSync("userInfo")
		getUserInfo()
		
	})
	function getUserInfo(){
		let userId=uni.getStorageSync("userId")
		uni.request({
			url:serverUrl+"userInfo/query",
			data:{
				"userId":userId
			},
			success(res) {
				if(res.data.status==200){
					uni.setStorageSync("userInfo",res.data.data)
					userInfo.value=res.data.data
					console.log(userInfo.value)
				}else{
					uni.showToast({
						title:res.data.msg
					})
				}
			}
		})
	}
	const getBirthday=(val)=>{
		let date=new Date(val)
		return getApp().dateFormat("YYYY-mm-dd",date)
	}
	//跳转修改昵称页面
	const modifyNickName=()=>{
		uni.navigateTo({
			url:"./modifyNickName?name="+userInfo.value.nickname
		})
	}
	//跳转修改抖音号页面
	const modifyDyNum=()=>{
		uni.navigateTo({
			url:"./modifyDyNum"
		})
	}
	//跳转到修改简介页面
	const modifyDesc=()=>{
		uni.navigateTo({
			url:"./modifyDesc"
		})
	}
	//跳转到性别页面
	const modifySex=()=>{
		uni.navigateTo({
			url:"./modifySex"
		})
	}
	//跳转到修改生日页面
	const modifyBirthday=()=>{
		uni.navigateTo({
			url:"./modifyBirthday"
		})
	}
	//跳转到修改地址页面
	const modifyLocation=()=>{
		uni.navigateTo({
			url:"./modifyLoaction"
		})
	}
	//退出登录
	const loginOut=()=>{
		uni.request({
			url:serverUrl+"/passport/logout",
			header:{
				"content-type":"application/x-www-form-urlencoded"
			},
			method:"POST",
			data:{
				userId:uni.getStorageSync("userId")
			},
			success(e){
				if(e.data.status==200){
					uni.clearStorageSync()
					uni.reLaunch({
						url:"../index/index"
					})
					uni.showToast({
						title:e.data.msg
					})
				}else{
					uni.showToast({
						title:e.data.msg
					})
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	   .my-set{
		   .line{
			   height: 1px;
			   background-color: #252731;
		   }
		   .face{
			   width: 160rpx;
			   height: 160rpx;
			   border-radius: 80rpx;
			   display: block;
			   border: 1px solid #fff;
			   margin: 50rpx auto;
		   }
		   .list{
			   display: flex;
			   justify-content: space-between;
			   align-items: center;
			   padding:20rpx;
			   .right{
				   display: flex;
				   align-items: center;
			   }
		   }
		   .icon-arrow{
			   width: 30rpx;
			   height: 30rpx;
			   margin-left: 10rpx;
		   }
		   .btn{
			   background-color: #4A4C52;
			   text-align: center;
			   padding: 20rpx 0;
			   margin-top: 30rpx;
		   }
	   }    
</style>
